<script setup lang="ts">
import { CSSProperties } from 'vue'
import './assets/index.css'

interface Props {
  /**
   * 按钮类型
   */
  type?: 'default' | 'primary' | 'outline' | 'text'
  /**
   * 按钮宽度
   */
  width?: number
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * open-type
   */
  openType?: string
  /**
   * style
   */
  buttonStyle?: CSSProperties
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  disabled: false,
  openType: '',
})
// const emit = defineEmits(['tap']);
</script>

<template>
  <button
    :open-type="props.openType"
    class="zd-button"
    :class="{
      'zd-button__primary': props.type === 'primary',
      'zd-button__outline': props.type === 'outline',
      disabled: props.disabled,
    }"
    :style="props.buttonStyle"
    hover-class="none"
    :disabled="props.disabled"
  >
    <slot />
  </button>
</template>

<style scoped lang="scss">
.zd-button {
  position: absolute;
  height: 80rpx;

  border: 2rpx solid $uni-color-paragraph;
  border: none;
  border-radius: 40rpx;
  text-align: center;

  color: $uni-color-paragraph;
  font-size: 32rpx;
  font-weight: 400;
  background-color: #fff;

  &::after {
    border: none;
  }

  &.zd-button__primary {
    border: none;
    color: #fff;
    background-color: $zd-main-color;
  }

  &.zd-button__outline {
    border-color: $zd-main-color;
    color: $zd-main-color;
  }

  &.disabled {
    opacity: 0.5;
  }
}
</style>
